<template>
  <div>
    <el-form v-if="expandForm" ref="form" :model="form" :inline="true">
      <el-row :gutter="8">
        <el-col :xs="24" :sm="8">
          <el-form-item label="规则编号" prop="no">
            <el-input v-model="form.no" placeholder="请输入" size="small" :style="styles.filterTool"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8">
          <el-form-item label="使用状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择" size="small" :style="styles.filterTool">
              <el-option value="0" label="关闭" />
              <el-option value="1" label="运行中" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8">
          <el-form-item label="调用次数" prop="number">
            <el-input-number v-model="form.number" size="small" :style="styles.filterTool" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :xs="24" :sm="8">
          <el-form-item label="更新日期" prop="updatedAt">
            <el-date-picker v-model="form.updatedAt" size="small" :style="styles.filterTool" placeholder="请输入更新日期" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8">
          <el-form-item label="使用状态" prop="status3">
            <el-select v-model="form.status3" placeholder="请选择" size="small" :style="styles.filterTool">
              <el-option value="0" label="关闭" />
              <el-option value="1" label="运行中" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8">
          <el-form-item label="使用状态" prop="status4">
            <el-select v-model="form.status4" placeholder="请选择" size="small" :style="styles.filterTool">
              <el-option value="0" label="关闭" />
              <el-option value="1" label="运行中" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div :style="{overflow: 'hidden'}">
        <span :style="{float: 'right', marginBottom: '24px'}">
          <el-button type="primary" native-type="submit">
            查询
          </el-button>
          <el-button :style="{marginLeft: '8px'}" @click="handleFormReset">
            重置
          </el-button>
          <a :style="{marginLeft: '8px'}" href="javascript:;" @click="toggleForm">
            收起
            <ant-icon type="up" />
          </a>
        </span>
      </div>
    </el-form>

    <el-form v-else ref="form" :model="form" inline @submit.native="handleSearch">
      <el-row :gutter="8">
        <el-col :xs="24" :sm="8">
          <el-form-item label="规则编号" prop="no">
            <el-input v-model="form.no" placeholder="请输入" size="small" :style="styles.filterTool" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8">
          <el-form-item label="使用状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择" size="small" :style="styles.filterTool">
              <el-option value="0" label="关闭" />
              <el-option value="1" label="运行中" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8">
          <span class="submit-buttons">
            <el-button type="primary" native-type="submit">
              查询
            </el-button>
            <el-button :style="{marginLeft: '8px'}" @click="handleFormReset">
              重置
            </el-button>
            <a :style="{marginLeft: '8px'}" href="javascript:;" @click="toggleForm">
              展开
              <ant-icon type="down" />
            </a>
          </span>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import BasicContainer from '@vue-materials/basic-container';

export default {
  components: { BasicContainer },
  name: 'Filter',

  data() {
    const styles = {
      filterCol: {
        display: 'flex',
        alignItems: 'center',
        marginBottom: '20px',
      },

      filterTitle: {
        width: '68px',
        textAlign: 'right',
        marginRight: '12px',
        fontSize: '14px',
      },

      filterTool: {
        width: '200px',
      },
    };

    return {
      expandForm: false,
      form: {},
      styles: styles
    };
  },

  created() {},

  methods: {
    toggleForm() {
      this.expandForm = !this.expandForm;
    },
  },
};
</script>

<style>
</style>
